<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <caption>商品列表</caption>
        <tr>
            <th>商品名</th>
            <th>价格</th>
            <th>销量</th>
        </tr>
    </table>
    <script>
        //定义一个空的person,不需要提前定义属性
        function Person(){}
        //实例化person对象
        let p1 = new Person();
        //动态添加属性
        p1.name = "TH";
        p1.age = 28;
        //动态添加方法
        p1.run = function () {
            console.log(this.name+":"+this.age);
        }
        p1.run();

        //定义一个自带属性和方法的对象
        function Car() {
            this.name = "新日";
            this.price = 1999;
            this.run = function () {
                console.log(this.name+":"+this.price);
            }
        }
        let c1 = new Car();
        c1.run();

        //直接实例化空对象的方式
        let p2 = {};
        p2.name = "孙尚香";
        p2.age = 18;
        p2.run = function () {
            console.log(this.name+":"+this.age);
        }
        p2.run();

        //直接实例化带属性的方法的对象
        let p3 = {
            name : "马可波罗",
            age : 30,
            run : function () {
                console.log(this.name+":"+this.age);
            }
        }
        p3.run();

        //将商品信息封装到一个对象中,在数组中装多个表示商品信息的对象
        let arr = [{title:"华为 Mate40 pro",price:6799,num:50000},
                   {title:"小米12 pro",price:5999,num:30000},
                   {title:"一加10 pro",price:5199,num:5000},
                   {title:"IQOO",price:3599,num:20000}]
        //得到table对象
        let table = document.querySelector("table");
        //遍历数组
        for (let item of arr) {
            let tr = document.createElement("tr");
            let titleTd = document.createElement("td");
            let priceTd = document.createElement("td");
            let numTd = document.createElement("td");
            //给td添加显示的商品信息
            titleTd.innerText = item.title;
            priceTd.innerText = item.price;
            numTd.innerText = item.num;
            tr.append(titleTd,priceTd,numTd);
            //把tr放入到table中
            table.append(tr);
        }
    </script>
</body>
</html>